<div class="m-l nav navbar-nav m-t block" style="width:300px;">
	<span>系统管理 ></span>
	<span>产品设置 </span>
</div>
<div class="m-t-lg">
	<div class="wrapper-sm">
		<div class="panel panel-default">
			<div class="panel-body">
				<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5;text-align: right">

					<!-- <div class="pull-right"> -->
					<button class="btn btn-info" (click)="myModal.show();btype=1">
							新增
						</button>
					<!-- </div>		 -->

				</div>
				<table class="table table-hover table-striped m-b-none default footable">
					<thead>
						<tr>
							<th>产品序号</th>
							<th>产品名称</th>
							<th>连接方式</th>
							<th>产品描述</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr *ngFor="let prodata of proData">
							<td>{{prodata.product_number}}</td>
							<td>{{prodata.product_name}}</td>
							<td>{{connectType[prodata.product_connection]}}</td>
							<td>{{prodata.product_description}}</td>
							<td>
								<button class="btn btn-xs btn-info" (click)="editproduct(prodata)">编辑</button>
								<button class="btn btn-xs btn-success" [routerLink]="['devicelist',prodata.id]">设备列表</button>
								<!-- <button class="btn btn-xs btn-primary" [routerLink]="['doormodel',prodata.id]">柜门模板</button> -->
								<button class="btn btn-xs btn-danger" (click)="delproduct(prodata)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


<div>
	<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" *ngIf="btype==1">新增产品</h4>
					<h4 class="modal-title" *ngIf="btype==2">编辑产品</h4>
					<h4 class="modal-title" *ngIf="btype==23">删除产品</h4>
					<!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
				</div>
				<div class="modal-body">
					<div class="form-horizontal" *ngIf="btype!=3">
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">产品名称</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入产品名称" name="proname" [(ngModel)]='proname' required="" *ngIf="btype==1">
								<input type="text" class="form-control" name="proname" [(ngModel)]='productname' *ngIf="btype==2">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;" >
								<p *ngIf="btype==1" [hidden]="proname">必填</p>
								<p *ngIf="btype==2" [hidden]="productname">必填</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">连接方式</label>
							<div class="col-sm-7">
								<select class="form-control" [(ngModel)]="proconnect" name="das" [disabled]="btype==2">
									<option value="">请选择</option>
									<option *ngFor="let item of connectType;index as i" value="{{i}}">{{item}}</option>
		        		</select>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">产品描述</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入产品描述" name="productdes" [(ngModel)]='prodes' *ngIf="btype==1">
								<input type="text" class="form-control" placeholder="请输入产品描述" name="productdes" [(ngModel)]='productdescription' *ngIf="btype==2">
							</div>
						</div>

					</div>
					<div *ngIf="btype==3">
						<h4>确定要删除产品：<strong>{{product_name}}</strong>吗？</h4>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-info confirm-btn" (click)="addsave()" [disabled]="!proname" *ngIf="btype==1">保存</button>
					<button class="btn btn-info confirm-btn" (click)="editsave()" [disabled]="!productname" *ngIf="btype==2">保存</button>
					<button class="btn btn-danger confirm-btn" (click)="delsave()" *ngIf="btype==3">保存</button>
					<button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
				</div>
			</div>

		</div>
	</div>
</div>